Ext.define('ES.view.archives.Archives',{
	extend:'Ext.container.Container',
	requires:['Ext.container.Container','ES.view.search.SearchBox','ES.view.archives.ProjectArchives'],
	alias:'widget.archivescomp',
	width:'100%',
	layout:{
		type:'vbox',
		pack:'center',
		align:'center',
		defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
	},
	loadTree:function(store){
		Ext.ComponentQuery.query('compcat[page=archivesPage]')[0].setRootNode(store.getRootNode())
	},
	loadProfileData:function(result){
		Ext.ComponentQuery.query('component[ESName=address]')[0].update(result.get('city') + ' , ' + result.get('country'));
		Ext.ComponentQuery.query('component[ESName=uName]')[0].update(result.get('name').toString());
		Ext.ComponentQuery.query('image[ESName=profilPic]')[0].setSrc(result.get('profilePic').toString());
		Ext.ComponentQuery.query('projectarchives')[0].loadProjectData(result.get('projects'));
	},
	config:{
		profilePic:'',
		name:'',
		city:'',
		country:''
	},
	initComponent:function(){
		this.items = [
			
        	{
        		xtype:'container',
        		width:'80%',
        		layout:{
        			type:'hbox',
        			defaultMargins:{top: 0, right: 10, bottom: 10, left: 0}
        		},
        		items:[
        			{
        				xtype:'container',
        				layout:{
        					type:'vbox',
        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
        				},
        				flex:.25,
        				items:[
        					{
        						xtype:'container',
        						width:'100%',
        						height:200,
        						border:1,
        						style:{
        							borderColor:'#CCCCCC',
        							borderStyle:'solid'
        						},
        						layout:{
        							type:'hbox',
        							align:'middle',
        							pack:'center'
        						},
        						items:[
        							{
        								xtype:'image',
        								width:'80%',
        								ESName:'profilPic'
        							}
        						]
        					},
        					{
        						xtype:'container',
        						width:'100%',
        						height:50,
        						border:1,
        						style:{
        							borderColor:'#CCCCCC',
        							borderStyle:'solid'
        						},
        						layout:{
        							type:'vbox',
        							align:'center',
        							pack:'center'
        						},
        						items:[
        							{
        								xtype:'component',
        								html:this.name,
        								ESName:'uName',
        								style:{
        									fontWeight:'bold'
        								}        								
        							},
        							{
        								xtype:'component',
        								ESName:'address',
        								html:this.city + ", " + this.country
        							}
        						]
        					},
        					{
        						xtype:'container',
        						width:'100%',
        						border:1,
        						style:{
        							borderColor:'#CCCCCC',
        							borderStyle:'solid'
        						},
        						layout:{
        							type:'hbox',
        							align:'middle',
        							pack:'center'
        						},
        						padding:'10 10 10 10',
        						items:[
        							{
		        						xtype:'compcat',
		        						page:'archivesPage'
		        					}
        						]
        					}
        				]
        			},
        			{
        				xtype:'container',
        				layout:{
        					type:'vbox',
        					defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
        				},
        				flex:.75,
        				items:[
        					{
        						xtype:'container',
        						width:'100%',
        						items:[
        							{
        								xtype:'projectarchives',
        								flex:1
        							}
        						]
        					}
        				]
        			}
        		]
        	}			
		]
		this.callParent(arguments);
	}
});